<template>
	<view>
		<view class="repair-card" v-for="(item,index) in propsList" :key='index' :style="{backgroundColor:item.environment_state == 2&&!isDetails?'#F35959':'#1A66FF'}">
			<view class="card-title">
				<view class="" style="flex:1">
					{{item.hospital_name||'-'}}
				</view>
				<image src="../static/bao.png" v-if="item.environment_state == 2&&!isDetails" mode="" class='bao' />
			</view>
			<view class="line" />
			<view class="card-content">
				<view class="card-content-item">
					<view class="">工单ID：</view>
					<view class="attribute">{{item.workID||'-'}}</view>
				</view>
				<view class="card-content-item">
					<view class="">科室：</view>
					<view class="attribute">{{item.department_name|| '-'}}</view>
				</view>
				<view class="card-content-item">
					<view class="">类别：</view>
					<view class="attribute">{{item.leibie_name||'-'}}</view>
				</view>
				<view class="card-content-item">
					<view class="">品牌：</view>
					<view class="attribute">{{item.pinpai_name||'-'}}</view>
				</view>
				<view class="card-content-item">
					<view class="">型号：</view>
					<view class="attribute">{{item.xinghao_name||'-'}}</view>
				</view>
				<view class="card-content-item">
					<view class="">序列号：</view>
					<view class="attribute">{{item.serial||'-'}}</view>
				</view>
			</view>

			<view class="card-bottom" v-if="!isDetails">
				<view class="card-content-item" v-for="(i,index) in item.unit" :key="index">
					{{i.unit_name}}：<text class="attribute" :style="{color:i.state == 2?'#56E12E':''}">{{i.port_value||0}}{{i.unit||''}}</text>
				</view>
			</view>
			<view class="card-bottom" v-if="isDetails">
				<view class="card-content-item2">
					当日用电量：<text class="attribute">{{item.use_num||0}}</text>
				</view>
				<view class="card-content-item2">
					当日电费：<text class="attribute">{{item.use_money||0}}</text>
				</view>
			</view>
			<view class="card-time" v-if="!isDetails">
				<view class="card-time-left" v-if="item.warranty_id" @click="jumpOrder(item.warranty_id)"> 查看工单</view>
				<view class="card-time-right" :style="{backgroundColor:item.environment_state != 2?'#1A66FF':'#F35959'}" @click="jumpDetail(item.id,item.warranty_id)"> 用电详情 </view>
			</view>
			<view class="card-time2" v-if="isDetails">
				<view class="card-createtime">
					{{item.date||' '}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderCard",
		props: {
			propsList: Array,
			isDetails: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			jumpDetail(id,warranty_id) {
				console.log(id,'顶顶顶顶顶顶顶顶顶',warranty_id)
				this.$parent.jump_detail(id,warranty_id)
			},
			jumpOrder(id) {
				this.$parent.jump_Order(id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repair-card {
		background-color: #1A66FF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		color: #fff;
		border-radius: 10rpx;
		overflow: hidden;

		.card-title {
			padding: 22rpx 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			display: flex;
			position: relative;
			justify-content: space-between;
			.bao {
				position: absolute;
				right: 16rpx;
				top: 12rpx;
				z-index: 99999;
				width: 66rpx;
				height: 66rpx;
			}
		}
		.line {
			background-color: #B3B3B5;
			width: 650rpx;
			height: 2rpx;
			margin: 0 auto;
		}

		.card-content {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			padding-bottom: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;

			.card-content-item {
				width: 50%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 12rpx;

				view:nth-child(1) {
					width: 40%;

				}

				view:nth-child(2) {
					width: 60%;
				}

				.attribute {
					display: inline-block;
					color: #fff;

				}
			}
		}

		.card-bottom {
			background-color: #fff;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0 20rpx 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			padding-bottom: 12rpx;

			.card-content-item {
				padding: 0 12rpx;
				color: #969699;
			}

			.attribute {
				display: inline-block;
				color: #000;
				margin-bottom: 12rpx;
			}

			.card-content-item2 {
				width: 49%;
				color: #969699;
			}
		}

		.card-time2 {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #646466;
			padding: 22rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-top: 2rpx solid #E8EBF2;
		}

		.card-time {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #646466;
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;
			border-top: 2rpx solid #E8EBF2;

			.card-createtime {
				float: left;
			}

			.card-time-left {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #646466;
				padding: 12rpx 32rpx;
				border-radius: 32rpx;
				opacity: 1;
				margin-right: 20rpx;
				border: 1rpx solid #E8EBF2;
			}

			.card-time-right {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #fff;
				padding: 12rpx 32rpx;
				border-radius: 32rpx;
				opacity: 1;
				background-color: $public-oclor;
			}
		}
	}
</style>